import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {

    width: 60
    height: 200

    color: "#333333"
    radius: 4
    border.width: 1
    border.color: "#444444"

    property int selectedIndex: 0

    ListView {
            id: listView
            anchors.fill: parent
            anchors.margins: 2

            // 数据模型
            model: ListModel {
                ListElement {
                    name: "0.5x"
                }
                ListElement {
                    name: "1x"
                }
                ListElement {
                    name: "1.5x"
                }
                ListElement {
                    name: "2x"
                }
                ListElement {
                    name: "4x"
                }
            }

            currentIndex: selectedIndex

            // 自定义Delegate
            delegate: Item {
                id: myitem
                width: listView.width
                height: 40

                Rectangle {
                    id: background
                    width: parent.width
                    height: parent.height
                    color:  listView.currentIndex === index ? "#222222" : (hovered ? "#444444" : "#333333")
                }

                property bool hovered: false

                Text {
                    text: name
                    anchors.centerIn: background
                    color: "#efefef"
                }

                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    onClicked: selectedIndex = index
                    hoverEnabled: true
                    onEntered: parent.hovered = true
                    onExited: parent.hovered = false
                }
            }
        }

}
